<template>
  <div style="width: 100%; height: 100%; min-width: 700px;">
    <div class="publishNotice_header">
      <span class="publishNotice_header_title">
        &nbsp;
        <i class="el-icon-office-building"/>
        发布公告
      </span>
    </div>
    <div class="publishNotice_main">
      <div class="publishNotice_main_header">
        <el-button type="primary" size="small" style="float: left;" @click="handleAdd">
          <i class="el-icon-plus"/>
          创建新公告
        </el-button>
        <div class="publishNotice_main_header_title">查找到{{tableData.length}}个结果</div>
        <el-link class="publishNotice_main_header_refresh" :underline="false" type="primary" @click="handleRefresh">
          <i class="el-icon-refresh" />
          刷新
        </el-link>
        <el-input
          class="publishNotice_main_header_search"
          v-model="search"
          :placeholder="searchInfo"
          @keyup.enter.native="getList"
        >
          <el-link style="padding-right: 5px;" slot="suffix" :underline="false" @click="getList">
            <i class="el-icon-search"/>
            搜索
          </el-link>
        </el-input>
        <el-dropdown
          class="publishNotice_main_header_searchWay"
          @command="handleCommand"
          trigger="click"
        >
          <span style="color: #409EFF;">
            {{ searchWay }}<i class="el-icon-arrow-down el-icon--right"/>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="title">按标题搜索</el-dropdown-item>
            <el-dropdown-item command="content">按内容搜索</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="publishNotice_main_main">
        <el-table
          v-loading="loading"
          :header-cell-style="{background:'#ECF1FE'}"
          :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
          min-height="500px"
          :default-sort = "{prop: 'time', order: 'descending'}"
          highlight-current-row
          border
          stripe
        >
          <el-table-column
            prop="title"
            label="公告标题"
            width="270"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="content"
            label="公告内容"
            min-width="360"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="time"
            label="发布时间"
            width="270"
          />
          <el-table-column
            label="操作"
            width="270"
          >
            <template slot-scope="scope">
              <el-link
                type="info"
                style="margin-right: 20px;"
                :underline="false"
                @click="handleCheck(scope.$index, scope.row)"
              >
                查看详情
              </el-link>
              <el-link
                type="primary"
                style="margin-right: 20px;"
                :underline="false"
                @click="handleEdit(scope.$index, scope.row)"
              >
                编辑
              </el-link>
              <el-link
                type="danger"
                :underline="false"
                @click="handleDelete(scope.$index, scope.row)"
              >
                删除
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="float: right; margin-top: 10px"
          @current-change="handlePageChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="tableData.length"
          layout="prev, pager, next, jumper"
        />
      </div>
      <el-dialog
        width="800px"
        :title="showTitle"
        :visible.sync="dialogFormVisible"
        :append-to-body="true"
        @close="handleCancle"
      >
        <el-form label-width="120px" ref="showRow" :rules="rules" :model="showRow">
          <el-form-item label="公告标题" prop="title">
            <el-input
              style="width: 600px;"
              v-model="showRow.title"
            />
          </el-form-item>
          <el-form-item label="公告内容" prop="content">
            <el-input
              style="width: 600px;"
              v-model="showRow.content"
              type="textarea"
              :autosize="{ minRows: 10 }"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible=false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  TOadminNoticeAdd,
  TOadminNoticeDelete,
  TOadminNoticeUpdate,
  TOadminNoticeCheck
} from '@/api/result-service'
export default {
  data() {
    return {
      originData: [],
      tableData: [],
      showTitle: "",
      nowRow: {},
      showRow: {
        title: "",
        content: ""
      },
      rules: {
        title: [{ required: true, message: '请输入公告标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入公告内容', trigger: 'blur' }]
      },
      search: "",
      searchData: "",
      searchInfo: "输入公告标题进行搜索",
      searchWay: "按公告标题搜索",
      currentPage: 1, // 当前页数
      pageSize: 10, // 设置分页数
      dialogFormVisible: false,
      isAdd: false,
      loading: false
    }
  },
  created() {
    this.handleRefresh();
  },
  methods: {
    handleRefresh() {
      this.loading = true;
      this.search = '';
      this.pageList();
    },
    pageList() {
      TOadminNoticeCheck().then((data) => {
        this.originData = data.sort((a, b) => {
          if (a.time < b.time) return 1;
          else return -1;
        });
        this.getList();
        this.loading = false;
      });
    },
    getList() {
      this.searchData = this.search;
      if (this.searchWay === "按公告标题搜索") {
        this.tableData = this.originData.filter((item) => {
          return item.title.includes(this.searchData);
        });
      } else if (this.searchWay === "按公告内容搜索") {
        this.tableData = this.originData.filter((item) => {
          return item.content.includes(this.searchData);
        });
      }
    },
    handlePageChange(val) {
      this.currentPage = val;
    },
    handleCommand(command) {
      if (command === "title") {
        this.searchInfo = "输入公告标题进行搜索";
        this.searchWay = "按公告标题搜索";
        this.search = "";
        this.getList();
      } else if (command === "content") {
        this.searchInfo = "输入公告内容进行搜索";
        this.searchWay = "按公告内容搜索";
        this.search = "";
        this.getList();
      }
    },
    handleAdd() {
      this.showTitle = "新增公告";
      this.isAdd = true;
      this.dialogFormVisible = true;
    },
    handleCheck(index, row) {
      this.$store.commit('hospital/setNotice', row);
      this.$router.push({ name: 'HospitalNoticeDetail' });
    },
    handleEdit(index, row) {
      this.showTitle = "修改公告";
      this.nowRow = row;
      this.showRow.noticeId = row.noticeId;
      this.showRow.title = row.title;
      this.showRow.content = row.content;
      this.dialogFormVisible = true;
    },
    handleDelete(index, row) {
      this.$confirm('此操作永久删除该条公告, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        TOadminNoticeDelete(row).then(() => {
          this.tableData.splice(index, 1);
          this.$message.success('删除成功');
        });
      });
    },
    handleCancle() {
      if (this.isAdd) {
        this.isAdd = false;
      } else {
        this.showRow.title = "";
        this.showRow.content = "";
      }
      this.dialogFormVisible = false;
    },
    handleSubmit() {
      if (this.isAdd) {
        this.$refs.showRow.validate(valid => {
          if (valid) {
            TOadminNoticeAdd(this.showRow).then(() => {
              this.$message.success('新增成功');
              this.showRow.title = "";
              this.showRow.content = "";
              this.handleRefresh();
            }).finally(() => {
              this.dialogFormVisible = false;
              this.isAdd = false;
            });
          } else {
            console.error('error submit!!!');
          }
        });
      } else {
        this.$refs.showRow.validate(valid => {
          if (valid) {
            TOadminNoticeUpdate(this.showRow).then(() => {
              this.$message.success('修改成功');
              this.nowRow.title = this.showRow.title;
              this.nowRow.content = this.showRow.content;
            }).finally(() => {
              this.dialogFormVisible = false;
            });
          } else {
            console.error('error submit!!!');
          }
        });
      }
    }
  }
}
</script>

<style lang="scss">
.publishNotice_header {
  background: #FFFFFF;
  border-bottom: 1px solid #DCDFE6;
  width: calc(100% - 60px);
  height: 50px;
  margin: 0px 30px;

  .publishNotice_header_title {
    font-weight: bold;
    font-size: 22px;
    line-height: 50px;
    margin-left: 5px;
    border-left: 5px solid #21a6e6;
  }
}

.publishNotice_main {
  margin: 30px 30px 0px 30px;
  width: calc(100% - 60px);

  .publishNotice_main_header {
    height: 40px;
    line-height: 40px;
    margin-bottom: 30px;

    .publishNotice_main_header_title {
      color: #919191;
      float: left;
      font-size: 14px;
      margin-left: 20px;
    }

    .publishNotice_main_header_refresh {
      float: right;
      margin-left: 20px;
    }

    .publishNotice_main_header_search {
      float: right;
      margin-left: 20px;
      width: 260px;
    }

    .publishNotice_main_header_searchWay {
      float: right;
      cursor: default;
    }
  }
}
</style>

<style lang="scss" scoped>

::v-deep .el-button--primary {
  color: #fff;
  background-color: #4875f6;
  border-color: #4875f6;
  -webkit-box-shadow: 0 5px 5px rgba(72,117,246,.15);
  box-shadow: 0 5px 5px rgba(72,117,246,.15);
}

::v-deep .el-button--primary:hover {
  background: #6d91f8;
  border-color: #6d91f8;
  color: #fff;
}

</style>